<template>
  <div class="data">
    <div>
      <el-input 
        v-model="input.link" 
        placeholder="名称" 
        style="width:200px;margin:0 5px;" 
        size="large">
      </el-input>
      <el-input 
        v-model="input.hostName" 
        placeholder="部署服务器" 
        style="width:200px;margin:0 5px;" 
        size="large">
      </el-input>
      <el-button 
        type="primary" 
        size="large" 
        style="margin-left:5px"
        @click="searchLog()">
        查询
      </el-button>
      <el-button plain size="large" @click="reset()">重置</el-button>
      <el-button type="primary" plain size="large" @click="isAddShow = true">添加</el-button>
    </div>

    <!-- 分割线 -->
    <hr style="width: 100%; height: 1px; margin-top: 20px" />
    <!-- 表单 -->
    <div class="table">
      <el-table
        :data="serverData"
        border
        style="width: 100%; z-index: 0;"
        class="shadow roundy-20"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        size="large"
        stripe
      >
        <el-table-column label="名称" align="center">
          <template #default="{ row }">
            <div>{{
              row.link
            }}</div>
          </template>
        </el-table-column>

        <el-table-column label="部署服务器" align="center">
          <template #default="{ row }">
            <span>{{ row.hostName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="服务器ip" align="center"> 
          <template #default="{ row }">
            <span>{{ row.serverIp }}</span>
          </template>
        </el-table-column>

        <el-table-column label="部署端口" align="center">
          <template #default="{ row }">
            <span>{{ row.port }}</span>
          </template>
        </el-table-column>

        <el-table-column label="命令" align="center">
          <template #default="{ row }">
            <span>{{ row.operation }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <ul>
              <li>
                <span style="color: rgb(23, 167, 23);" @click="checkLog(row)">
                  查看
                </span>
              </li>
              <li>
                <span style="color: rgb(30, 30, 170);" @click="editShow(row)">
                  编辑
                </span>
              </li>
              <li>
                <span style="color: rgb(190, 29, 29);" @click="deleteLog(row)">
                  删除
                </span> 
              </li>
            </ul>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog 
      v-model="isEditShow" 
      title="编辑日志" 
      style="width: 500px; border-radius: 15px;"
    >
      <el-form :model="editForm" label-width="120px" :rules="rules" ref="editForm">
        <el-form-item label="名称" prop="link">
          <el-input v-model="editForm.link" style="width: 250px;" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="部署服务器" prop="hostName">
          <el-input v-model="editForm.hostName" style="width: 250px;" placeholder="请输入部署服务器" />
        </el-form-item>
        <el-form-item label="服务器ip" prop="serverIp">
          <el-input v-model="editForm.serverIp" style="width: 250px;" placeholder="请输入服务器ip" />
        </el-form-item>
        <el-form-item label="部署端口" prop="port">
          <el-input v-model="editForm.port" style="width: 250px;" placeholder="请输入部署端口" />
        </el-form-item>
        <el-form-item label="命令" prop="operation">
          <el-input v-model="editForm.operation" style="width: 250px;" placeholder="请输入命令" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isEditShow = false">取消</el-button>
          <el-button type="primary" @click="editLog()">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加弹窗 -->
    <el-dialog 
      v-model="isAddShow" 
      title="添加日志" 
      style="width: 500px; border-radius: 15px;"
    >
      <el-form :model="addForm" label-width="120px" :rules="rules" ref="addForm">
        <el-form-item label="名称" prop="link">
          <el-input v-model="addForm.link" style="width: 250px;" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="部署服务器" prop="hostName">
          <el-input v-model="addForm.hostName" style="width: 250px;" placeholder="请输入部署服务器" />
        </el-form-item>
        <el-form-item label="服务器ip" prop="serverIp">
          <el-input v-model="addForm.serverIp" style="width: 250px;" placeholder="请输入服务器ip" />
        </el-form-item>
        <el-form-item label="部署端口" prop="port">
          <el-input v-model="addForm.port" style="width: 250px;" placeholder="请输入部署端口" />
        </el-form-item>
        <el-form-item label="命令" prop="operation">
          <el-input v-model="addForm.operation" style="width: 250px;" placeholder="请输入命令" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isAddShow = false">取消</el-button>
          <el-button type="primary" @click="addLog()">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页器 -->
    <div class="demo-pagination-block">
      <el-pagination
        :current-page="page.pageNum"
        :page-size="page.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
import request from '@/utils/request';
import { ElMessageBox } from 'element-plus'
export default {
  name: "LogManagePage",
  data() {
    return {
      /* 服务器传来的数据源数据 */
      serverData:[],
      page:{
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      isEditShow:false,
      isAddShow:false,
      editForm:{},
      addForm:{},
      input:{},
      rules:{
        port:[
          { required: true, message: '请填写端口号', trigger: 'blur' },
          { required: true, pattern: /\d+/, message: '端口号只能是数字', trigger: 'blur' },
        ],
        serverIp:[
          { required: true, message: '请填写服务器ip', trigger: 'blur' },
          { required: true, pattern: /\d+[.]\d+[.]\d+[.]+\d/, message: '请按0.0.0.0的格式填写', trigger: 'blur' },
        ],
        hostName:[
          { required: true, message: '请填写部署服务器', trigger: 'blur' },
        ],
        operation:[
          { required: true, message: '请填写操作', trigger: 'blur' },
        ],
        link:[
          { required: true, message: '请填写名称', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      
      this.searchLog()
      
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;

      this.searchLog()
    },
    /* 显示编辑窗口 */
    editShow(el){
      this.isEditShow = true
      this.editForm = {
        operation: el.operation,
        port: el.port,
        link: el.link,
        hostName: el.hostName,
        serverIp: el.serverIp,
        id: el.id
      }
    },
    /* 重置 */
    reset(){
      this.input = {}
      this.searchLog()
      this.page.pageNum = 1
    },
    /* 添加日志 */
    addLog(){
      this.$refs['addForm'].validate((isValid)=>{
        if(isValid){
          request.post("newapi/diary/add",{
            serverIp: this.addForm.serverIp,
            hostName: this.addForm.hostName,
            operation: this.addForm.operation,
            port: this.addForm.port,
            link: this.addForm.link,
          }).then(
            res => { 
              if(res.code == 200){
                console.log(res.data);
                this.$message({
                  message: "操作成功",
                  type: 'success'
                })
                this.searchLog()
                this.isAddShow = false
                this.addForm = {}
              }else{
                this.$message({
                  message: "操作失败!",
                  type: 'error'
                }) 
              }
            },
            error => { 
              this.$message({
                message: error.message,
                type: 'error'
              }) 
            },
          )

        }else{
          this.$message({
            message: '请正确填写信息！',
            type: 'error'
          })
        }
      })
      
      
    },
    /* 删除日志 */
    deleteLog(el){

      ElMessageBox.confirm(
        '您确认要删除该日志吗?',
        '提示',
        {
          confirmButtonText: '继续',
          cancelButtonText: '算了吧',
          type: 'warning',
        }
      ).then(() => {
          /* 确认后删除 */
          request.delete("newapi/diary/delete/" + el.id).then(
            res => { 
              if(res.code == 200){
                console.log(res.data);
                this.$message({
                  message: "操作成功",
                  type: 'success'
                })
                this.searchLog()
              }else{
                this.$message({
                  message: "操作失败!",
                  type: 'error'
                }) 
              }
            },
            error => { 
              this.$message({
                message: error.message,
                type: 'error'
              }) 
            },
          )
        }).catch(() => {
        this.$message({
          message: '会话删除操作已取消',
          type: 'info'
        });
      })

      
    },
    /* 查询日志 */
    searchLog(){
      request.get("newapi/diary/list",{
        params: {
          link: this.input.link,
          hostName: this.input.hostName,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }
      }).then(
        res => { 
          if(res.code == 200){
            console.log(res.data);
            this.$message({
              message: "操作成功",
              type: 'success'
            })
              this.serverData = res.data.records
              this.page.total = res.data.total
          }else{
            this.$message({
              message: "操作失败!",
              type: 'error'
            }) 
          }
        },
        error => { 
          this.$message({
            message: error.message,
            type: 'error'
          }) 
        },
      )
    },
    /* 编辑日志 */
    editLog(){
      this.$refs['editForm'].validate((isValid)=>{
        if(isValid){
          request.post("newapi/diary/edit",{
            link: this.editForm.link,
            hostName: this.editForm.hostName,
            serverIp: this.editForm.serverIp,
            port: this.editForm.port,
            operation: this.editForm.operation,
            id: this.editForm.id
          }).then(
            res => { 
              if(res.code == 200){
                console.log(res.data);
                this.$message({
                  message: "操作成功",
                  type: 'success'
                })
                this.searchLog()
                this.isEditShow = false
              }else{
                this.$message({
                  message: "操作失败!",
                  type: 'error'
                }) 
              }
            },
            error => { 
              this.$message({
                message: error.message,
                type: 'error'
              }) 
            },
          )

        }else{
          this.$message({
            message: '请正确填写信息！',
            type: 'error'
          })
        }
      })
    },
    /* 查看日志 */
    checkLog(el){
      this.$store.dispatch('setLog', {log: el})
      this.$router.push('/user/remoteTerminal')
    }
  },
  mounted(){
    this.searchLog()
  },
};
</script>

<style scoped lang="less">
.data {
  display: flex;
  flex-direction: column;
  width: 100%;
}

span {
  white-space: nowrap;
}

.table {
  width: 100%;
  margin-top: 20px;
}
.form-inline {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  align-items: center;
}

.from-inline-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.demo-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}


li {
  float: left;
  font-size: 15px;
  padding: 0 10px;
  color: rgb(38, 105, 230);
  height: 15px;
  line-height: 15px;
  border-right: 1px solid rgb(155, 155, 155);
  
  span {
    cursor: pointer;
  }
  span:hover {
    color: rgb(5, 42, 110);
    text-decoration: underline;
  }
}
li:last-child {
  padding-right: 0;
  border-right: 0;
}

li:first-child {
  padding-left: 0;
}

ul {
  list-style: none;
  padding-left: 20px;
}

/* 编辑窗口 */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
